<script setup lang="ts">
import { reactive, onUpdated } from 'vue'
import { NModal, NCard, NForm, NSpace, NFormItem, NButton, NTransfer, useNotification } from 'naive-ui'
import type { Option } from 'naive-ui/es/transfer/src/interface';
import http from '@/tools/http'

const props = defineProps(["roleModelVisiable", "userId", "userName"])
const emit = defineEmits(["update:roleModelVisiable"])
const notification = useNotification()

type FormData = {
    userId: string
    roleCodeList: string[]
}

const formData = reactive<FormData>({
    userId: "",
    roleCodeList: []
})

const roleList = reactive<Option[]>([])

onUpdated(() => {
    formData.roleCodeList.length = 0
    listRole()
    listUserRole()
})

function listUserRole() {
    const request = {
        pageNum: 0,
        pageSize: 0,
        userId: props.userId
    }
    http.post("/user/role/page", request).then(({ data }) => {
        if (data.code === "0") {
            formData.roleCodeList.length = 0
            for (let i = 0; i < data.data.length; i++) {
                formData.roleCodeList.push(data.data[i].roleCode)
            }
        }
    })
}

function listRole() {
    const request = {
        pageNum: 0,
        pageSize: 0
    }
    http.post("/role/page", request).then(({ data }) => {
        if (data.code === "0") {
            roleList.length = 0
            for (let i = 0; i < data.data.list.length; i++) {
                let label = data.data.list[i].roleCode + " - " + data.data.list[i].roleName
                if (data.data.list[i].remark && data.data.list[i].remark.length > 0) {
                    label = label + " - " + data.data.list[i].remark
                }
                const option = {
                    label: label,
                    value: data.data.list[i].roleCode
                }
                roleList.push(option)
            }
        }
    })
}

function submit() {
    formData.userId = props.userId
    http.post("/user/role/add", formData).then(({ data }) => {
        if (data.code === "0") {
            notification['success']({
                content: '设置角色成功',
                meta: `${data.msg}`,
                duration: 2500,
                keepAliveOnHover: true
            })
            emit('update:roleModelVisiable', false)
        }
    })
}
</script>

<template>
    <n-modal :show="props.roleModelVisiable" :on-esc="() => emit('update:roleModelVisiable', false)"
        :on-mask-click="() => emit('update:roleModelVisiable', false)">
        <n-card style="width: 600px" :title="`【${props.userId} - ${props.userName}】设置角色`">
            <n-form>
                <n-form-item>
                    <n-transfer source-title="待选角色" target-title="已有角色" ref="transfer"
                        v-model:value="formData.roleCodeList" virtual-scroll :options="roleList" source-filterable />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button attr-type="button" @click="emit('update:roleModelVisiable', false)">取消</n-button>
                    <n-button attr-type="button" @click="submit()">提交</n-button>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<style scoped>

</style>